layui.use(['carousel', 'form', 'jquery', 'element'], function(){
  var carousel = layui.carousel
  ,form = layui.form
  ,$ = layui.$
  ,element = layui.element;

  // 个人信息展示
  $.ajax({
    type: "GET",
    url:"/user/detail/",
    headers:{
      'Authorization': localStorage.getItem('Authorization')
    },
    success:function (msg){
      // console.log(msg);
      let code = msg.code;
      // 非登录状态
      if(code != 0){
        $('#user-info').html(
            '<div class="layui-nav-item">\n' +
            '         <a class="login" href="/static/page/user/login.html">亲，请登录</a>\n' +
            '      </div>\n' +
            '      <div class="layui-nav-item">\n' +
            '          <a class="register" href="/static/page/user/register.html">免费注册</a>\n' +
            '       </div>'
        )
      }else{ // 登录状态,实现头像和昵称显示
          let nickname = msg.data.email; // 没有昵称显示有邮箱
          if (msg.data.detail['nickname']){
              nickname = msg.data.detail['nickname'];
          }
          $('#nickname').html(nickname);
          if(msg.data.detail['portrait']){// 如果有头像就显示头像，没有就显示默认
            $('#portrait').attr('src', msg.data.detail['portrait']);
          }
      }

    }
  })

  //图片轮播
  carousel.render({
    elem: '#banner'
    ,width: '778px'
    ,height: '440px'
    ,interval: 5000
  });

  // 菜单的展示
  $.get('/commodity/menu/', function (data){
      let menus = data.data;
      console.log(menus);
      let menuData = `` // 模板字符串
      for(let i=0;i<menus.length; i +=3){// 每个li标签里有三个主菜单
          menuData += `<li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                            <div class="layui-menu-body-title">
                                <span class="layui-breadcrumb">`

          // 实现a标签拼接
          for(let x = i; x < i + 3;x++){
              if(x<menus.length){
                  menuData += `<a href="">${menus[x].fields.name}</a>`
              }
          }
          menuData += `</span>
                                <i class="layui-icon layui-icon-right"></i>
                            </div>
                            <div class="layui-panel layui-menu-body-panel">
                                <ul>`
          for(let y = i; y < i + 3;y++){
              if(y<menus.length){
                  menuData += `<li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                        <div class="layui-menu-body-title">
                                            <h3>${menus[y].fields.name}</h3>
                                            <span class="layui-breadcrumb">`
                  if(menus[y].son){
                      $.each(menus[y].son, function(i, item){
                          menuData += `<a href="">${item.name}</a>`
                      });
                  }
                  menuData += `</span>
                                        </div>
                                    </li>`
              }
          }
          menuData += ` </ul>
                            </div>`
          $("#menu").html(menuData);
          element.render('breadcrumb');
      }
  });

  // 获取商品数据，展示到栏目
  $.get('/commodity/column/', function (data) {

      let columnData = `` // 模板字符串
      $.each(data.data, function (i, column) {
            if(column.commodity_list.length > 0){
                columnData += `<div class="good-goods">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend><span>${column.name}</span><span class="layui-badge">全民口碑</span></legend>
            </fieldset>
            <div class="layui-row">`
                $.each(column.commodity_list, function (i, commodity){
                    columnData += `<div class="layui-col-xs3">
                    <div class="grid-demo grid-demo-bg1">
                        <div style="padding: 30px;">
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-md6">
                                    <div class="layui-card">
                                        <div class="layui-card-header">
                                            <div class="img">
                                                <img src="${commodity.cover_picture}" alt="">
                                            </div>
                                        </div>
                                        <div class="layui-card-body">
                                            <h4>${commodity.title}</h4>
                                            <p>${commodity.subtitle}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>`
                })
                columnData += `</div>
        </div>`
            }
      });
      $('#column').html(columnData);
  });

});